<template>
  <basic-container
    v-loading="loading"
    page-title="个人中心"
    custom-content="px-0"
    transparent
  >
    <el-tabs v-model="active" class="mb-4 basic-tabs">
      <el-tab-pane label="基本信息" name="基本信息"> </el-tab-pane>
      <el-tab-pane label="安全设置" name="安全设置"> </el-tab-pane>
      <el-tab-pane v-if="apiVisible" label="API Key管理" name="API Key管理">
      </el-tab-pane>
    </el-tabs>
  </basic-container>
</template>

<script setup lang="ts">
type IActive = '基本信息' | '安全设置' | 'API Key管理'
const active = ref<IActive>('基本信息')

const loading = ref(false)
const appStore = useAppStore()

onMounted(() => {
  loading.value = true
  appStore
    .userInfoAction()
    .then(() => {
      loading.value = false
    })
    .finally(() => {
      loading.value = false
    })
})

const userInfo = computed(() => appStore.userInfo!)
const apiVisible = computed(() => userInfo.value?.api_status === 1)
</script>

<style lang="scss" scoped></style>
